<template>
	<div class="top-nav-com w-full h-[60px] shadow-lg">
		<div class="w-full h-full flex justify-between items-center px-3">
			<div class="title">
				<nuxt-link to="/">
					<h1 class="font-bold text-blue-500" title="标题">{{ siteStore.config.title }}</h1>
				</nuxt-link>
			</div>
			<div class="tools flex">
				<div class="about cursor-pointer text-blue-500" title="关于" @click="aboutVisible = true">
					<i class="bi bi-info-circle-fill"></i>
				</div>
			</div>
		</div>
		<els-dialog v-model="aboutVisible" title="关于">
			<div v-html="aboutHtml"></div>
		</els-dialog>
	</div>
</template>

<script lang="ts">
import { useSiteConfigStore } from '~/store/siteConfigStore';

export default defineComponent({
	name: 'TopNav',
	setup() {
		const siteStore = useSiteConfigStore();

		const aboutVisible = ref<boolean>(false);
		const aboutHtml = ref<string>(siteStore.config.about);

		return {
			siteStore,
			aboutHtml,
			aboutVisible,
		};
	},
});
</script>
